/* ----- Global settings ----------------------------------------------- {{{ */

:root {
  /* --- Colors --- */
  --color-text: #1b2733;
  --color-text-secondary: #637282;
  --color-link: #0066cc;
  --color-sidenote: #616970;

  --highlight-red: #ea9999;
  --highlight-yellow: #ffe599;
  --highlight-green: #b6d7a8;
  --highlight-blue: #a4c2f4;
  --highlight-purple: #b4a7d6;

  --color-inline-code: #1b2733;
  --color-inline-code-bg: #f3f3f8;

  --color-border: #dfdfd0;
  --color-border-heavy: #ccccd4;

  --color-table-heading: #f3f3fb;

  /* --- Text --- */

  --font-family-prose: system-ui,Helvetica,Arial,sans-serif;
  --font-family-heading: system-ui,Helvetica,Arial,sans-serif;
  /* --side-note-number-font-family: var(--font-family-prose); */

  --line-height: 26px;
  --font-size: 17px;

  --inline-code-font-size: 15px;
  --code-block-font-size: 14px;
  --code-block-side-padding: 8px;
  --line-numbers-font-size: 12px;

  --tight-code-line-height: 18px;
  --tight-code-padding-top: 5px;

  --side-note-line-height: 20px;
  --side-note-font-size: 13px;
  --side-note-code-font-size: 13px;
  --side-note-baseline-offset: 4px;
  --side-note-sup-offset: -6px;
  --side-note-number-hang-left: -6px;
  --side-note-text-indent: -9px;

  --heading-font-weight: 500;

  --title-font-size: 42px;
  --title-code-font-size: 40px;
  --title-line-height: 48px;
  --title-margin-top: 92px;

  --h1-font-size: 32px;
  --h1-code-font-size: 29px;
  --h1-line-height: 36px;
  --h1-word-spacing: 1px;
  --h1-margin-top: 30px;
  --h1-margin-bottom: 12px;

  --h2-font-size: 22px;
  --h2-code-font-size: 20px;
  --h2-line-height: 28px;
  --h2-word-spacing: 0.5px;
  --h2-margin-top: 18px;
  --h2-margin-bottom: 6px;

  --ul-indent-size: 23px;
  --ol-indent-size: 19px;
  --ol-li-padding-left: 4px;

  --hr-margin-top: 18px;
  --hr-margin-bottom: calc(var(--line-height) - var(--hr-margin-top) - 1px);

  --extra-wide-scale-factor: 1.5;

  --figcaption-line-height: 21px;
  --figcaption-font-size: 14px;
  --figcaption-code-font-size: 13px;
  --figcaption-gap: 6px;
  --captioned-figure-gap: 10px;

  --table-line-height: 21px;
  --table-font-size: 14px;
  --table-code-font-size: 13px;

  --nav-toc-font-size: 12px;
  --nav-toc-code-font-size: 12px;
  --nav-toc-indent: 15px;
  --nav-toc-baseline-offset: 2px;

}

/* @media (prefers-color-scheme: light) {
  :root {
    --background-color: #161313;

    --color-text: #f7f5f2;
    --color-text-secondary: #9d9b99;
    --color-link: #2994ff;
    /* --color-sidenote: #b4b2af; */

    --highlight-red: #660000;
    --highlight-yellow: #7f6000;
    --highlight-green: #274e13;
    --highlight-blue: #1c4587;
    --highlight-purple: #351c75;

    --color-inline-code: #f7f5f2;
    --color-inline-code-bg: #242121;

    --color-border: #393635;
    --color-border-heavy: #524f4d;

    --color-table-heading: #242121;
  }
} */

*, *:after, *:before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  /* https://github.com/edwardtufte/tufte-css/issues/81#issuecomment-261953409 */
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-family-prose);
  color: var(--color-text);
  font-size: var(--font-size);
  line-height: var(--line-height);
  -webkit-font-variant-ligatures: no-common-ligatures;
  font-variant-ligatures: no-common-ligatures;

  /* Safari-only right now (macOS, iOS) but looks so good. */
  hanging-punctuation: first; */

  margin: 7.5%;
  padding: 7.5%;
  background-color: var(--background-color);
}

a code, a:link code, a:visited code,
a, a:link, a:visited {
  color: var(--color-link);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

code {
  font-family: var(--font-family-code);

  word-spacing: normal;

  /* Only for inline code */
  color: var(--color-inline-code);
  background-color: var(--color-inline-code-bg);
  font-size: var(--inline-code-font-size);
  margin: 0;
  padding: 2px 0 1px;
  border: 1px solid var(--color-border);
  border-radius: 1px;
}

pre code {
  /* Reset some changes meant to be inline-only */
  color: inherit;
  background-color: inherit;
  font-size: var(--code-block-font-size);
  line-height: var(--line-height);
  margin: initial;
  padding: initial;
  border: initial;
  border-radius: initial;
}

pre > code {
  position: relative; /* For line highlights */
  display: inline-block;
  min-width: 100%;
  z-index: 1;

  white-space: pre-wrap;

  padding: 0 var(--code-block-side-padding);
}

code.sourceCode::selection {
  /* Prevent bug where far right edge of text box shows as selected. */
  background: transparent;
}

.note table {
  font-size: inherit;
  line-height: inherit;
}
.note table, .note td {
  border: none;
}

.note.red    td { background: var(--highlight-red); }
.note.yellow td { background: var(--highlight-yellow); }
.note.green  td { background: var(--highlight-green); }
.note.blue   td { background: var(--highlight-blue); }
.note.purple td { background: var(--highlight-purple); }

span.mark, mark {
  /* Reset browser styles */
  color: inherit;

  padding: 2px 0 1px;
}
span.mark.red,    mark.red    { background-color: var(--highlight-red);    }
span.mark.yellow, mark.yellow { background-color: var(--highlight-yellow); }
span.mark.green,  mark.green  { background-color: var(--highlight-green);  }
span.mark.blue,   mark.blue   { background-color: var(--highlight-blue);   }
span.mark.purple, mark.purple { background-color: var(--highlight-purple); }

h1 {
  color: #333;
}
h2 {
  color: #333;
}
h3 {
  color: #333;
}
h4 {
  color: #333;
}

table {
  border-collapse: collapse;
  min-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.pill {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid #e6e6e6;
  border-radius: 999px;
  font-size: 12px;
  line-height: 18px;
  margin-left: 6px;
  white-space: nowrap;
}
.pill-lecture {
  background: #eef6ff;
  border-color: #b6daff;
  color: #084b8a;
}

/* container (optional, just for centering + line length) */
/* .lecture-wrap {
  max-width: 980px;
  margin: 0 auto 24px;
  border: 2px solid gold; */

/* grid that wraps without horizontal scroll */
.lecture-grid {
  display: grid;
  grid-template-columns: repeat();
  /* display: flex;
  flex-wrap: wrap; */
}

/* buttons/pills */
.lecture-grid a.btn {
  display: block;
  text-align: center;
  white-space: nowrap;  
  padding: .55rem .8rem;
  margin: 2rem;
  color: black;
}